<!DOCTYPE html>
<!--关于angular基本学习-->
<!--当表达式出错时，会导致angular渲染出错-->
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular_1.4.6.js" ></script>
		<script src="js/demo1.js" type="text/javascript" charset="utf-8"></script>
		<style>
			input.ng-pristine {
				background-color: lightblue;
			}
		</style>
	</head>
	<body ng-app="myapp" ng-init="name='tom';age=12" >
		<h3>1.初始化变量，并使用</h3>
		name:<input type="text" ng-model="name" />
		age:<input type="text" ng-model="age" />
		<h3>2.controller test</h3>
		<div id="" ng-controller="myctrl">
			<span ng-bind="title"></span> <=====>
			<span >{{title}}</span>
			<ul>
				<!--通过$index 获取索引值-->
				<li ng-repeat="content in contents">{{$index + 1 + "." + content}}</li>
			</ul>
			<!--select 必需指定 ng-model -->
			<select ng-model="select2"  ng-options="x for x in contents">
			</select>

            <p>
                <!---->
                姓: <input type="text" ng-model="firstName">
                名: <input type="text" ng-model="lastName">
                姓名: {{fullName()}}
            </p>
			<!-- 值的拷贝-->
            <h4>值的拷贝:</h4>
			<span>{{title2}}</span>
		</div>
		<h3>3.自定义标签</h3>
		<test>hi test</test>
		<h3>4.验证用户输入</h3>
		<form  name="myForm">
		<input type="email" name="myPhone" ng-model="text" required/>
		<span ng-show="myForm.myPhone.$error.email">不是一个合法的电话</span>
		</form>
		<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
		<h3>5.rootScope</h3>
		<span ng-bind="context"></span>
        <h3>6.过滤器</h3>
        <input ng-model="testFilter" placeholder="请输入金额"/>
        <span ng-bind="testFilter|currency"></span>
        <div  ng-controller="myfilter">
            <p>输入过滤:</p>
            <p><input type="text" ng-model="test"></p>
            <ul>
                <li ng-repeat="x in countrys | filter:test | orderBy:'country'">
                    {{ (x.name | uppercase | ToUp) + ', ' + x.country }}
                </li>
            </ul>
        </div>
        <h3>7.service</h3>
        <div  ng-controller="myservice">
            <span ng-bind="printLocation()"></span><br/>
            <input type="text" ng-model="num"/>
            <span ng-bind="myFunc(''+num)"></span>
            <span ng-bind="''+num|ToUp"></span>
        </div>
		<h3>8.select</h3>
		<div ng-controller="myselect">
			<select ng-model="selectedSite">
				<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
			</select>

			<h1>你选择的是: {{selectedSite}}</h1>

			<select ng-model="selectedSite1" ng-options="x.site for x in sites">
			</select>
			<h1>你选择的是: {{selectedSite1.site}}</h1>
			<p>网址为: {{selectedSite1.url}}</p>
		</div>
		<h3>9.</h3>
		<div>

		</div>
	</body>
</html>
